<template>

  <div class="day-prt-box" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
    <div class="reset-box">重置</div>
    <ul class="main">
      <template v-for="(item , index) in list">
        <li class="item flex">
          <span class="week" style="line-height: 24px;">{{ item }}</span>
          <div class="day-box flex">
            <span
              v-for="(v,i) in 24"
              :id="'hour'+index+i"
              :class="ischenck(index,i)"
              @mousedown="handleMouseDown(index,i)"
              @mouseenter="handleMouseEnter(index,i)"
              @mouseup.stop="handleMouseUp"
            >
              {{ i<10?'0'+i:i }}
            </span>
          </div>
        </li>

      </template>
      <li class="time flex">
        <template v-for="(item,index) in 5">
          <span style="color: #717275;">{{ index*6 }} </span>
        </template>
      </li>

    </ul>
  </div>

</template>

<script>
export default {
  props: {
    checkedTime: {
      type: Object,
      default: []
    }
  },
  data() {
    return {
      list: ['日', '一', '二', '三', '四', '五', '六'],
      timer: [], // 选中的时间组
      isCalc: false,
      enterTime: [] // 鼠标经过的时间
    }
  },
  watch: {
    checkedTime: {
      deep: true,
      immediate: true,
      handler: function(newval, oldval) {
        if (!this.checkedTime) return
        const arr = []
        this.checkedTime.forEach(item => {
          const index = Math.floor(item / 24)
          if (!arr[index]) {
            arr[index] = []
          }
          const num = item - (index * 24) * 1
          arr[index][num] = num + 1 < 10 ? '0' + num : num
        })
        this.timer = arr
      }
    }
  },
  mounted() {

  },
  methods: {
    ischenck(index, item) {
      if (!this.timer[index]) {
        return 'hour'
      } else {
        if (!this.timer[index][item]) {
          return 'hour'
        } else {
          return 'hour active'
        }
      }
    },

    handleMouseLeave() {
      this.handleMouseUp()
    },

    handleMouseDown(index, item) {
      this.handleClick(index, item)
      this.isCalc = true
      this.enterTime = []
    },
    handleMouseEnter(index, item) {
      const which = event.which // 判断鼠标
      if (this.isCalc && which) {
        const box = document.getElementById('hour' + index + item)
        box.setAttribute('style', 'background-color: yellow ')
        this.enterTime.push({
          index,
          i: item
        })
      }
    },

    handleMouseUp(index, item) {
      this.isCalc = false
      if (this.enterTime.length) {
        this.enterTime.forEach(item => {
          this.handleClick(item.index, item.i)
        })
      }
      this.enterTime = []
      this.isCalc = false
    },

    handleClick(week, hour) {
      this.isCalc = false
      const box = document.getElementById('hour' + week + hour)
      box.setAttribute('style', 'background-color: #fff')
      const arr = JSON.parse(JSON.stringify(this.timer))
      if (arr[week]) {
        if (arr[week][hour]) {
          arr[week][hour] = undefined
        } else {
          arr[week][hour] = hour + 1
        }
      } else {
        arr[week] = []
        arr[week][hour] = hour + 1
      }
      this.timer = arr

      console.log(this.computTime(), '你好，这是选择好的时间段')
    },

    computTime() {
      const arr = []
      this.timer.forEach((item, index) => {
        if (item) {
          item.forEach((v, i) => {
            if (v) {
              const num = index * 24 + i
              arr.push(num)
            }
          })
        }
      })
      return arr
    }

  }
}
</script>
<style lang="scss" scoped="true">
  @import "~@/styles/variables.scss";

  .main {
    li {
      width: 460px;
      overflow: hidden;
    }

    .time {
      padding-left: 20px;
    }

    .item {
      justify-content: flex-start;
      align-items: flex-end;

      .week {
        display: inline-block;
        margin-right: 14px;
        height: 24px;
        font-size: 14px;
        line-height: 24px;
        color:#717275;
      }

      .day-box {
        border-bottom: 1px solid #DEE1E6;
        flex: 1;

        span {
          flex: 1;
          display: inline-block;
          height: 24px;
          cursor: pointer;
          font-size: 0;
          color: #FFFFFF;
          line-height: 22px;

          &.active,
          &:hover {
            background-color: $mainColor1 !important;
            font-size: 11px;
          }

        }
      }
    }
  }

  .reset-box{
    position: absolute;
  }
</style>
